<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 柱状图示例</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var xDataArr = ['张三','李四','王五','闰土','小明','茅台','二妞','大强'];
        var yDataArr_yuwen = [88,92,63,77,94,80,72,86];
        var yDataArr_shuxue = [93,60,61,62,85,79,92,30];
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '成绩展示',
                textStyle: {
                    color:'red',
                },
                borderWidth: 5,
                borderColor: 'blue',
                borderRadius: 5,
            },
            tooltip: {
                trigger: 'axis',
                triggerOn: 'click',
                formatter: function (params) {
                    return params[0].name + 
                    params[0].seriesName + '的分数是:'+params[0].value;
                }
            } ,
            toolbox: {
               feature: {
                 saveAsImage: {
                    type: 'png',
                    pixelRatio: 2,
                    backgroundColor: '#fff'
                 },
                 dataView: { // 数据视图
                        readOnly: false,
                        lang: ['数据视图', '关闭', '刷新']
                    },
                    magicType: { // 动态类型切换
                        type: ['line', 'bar'],
                    },
                    dataZoom: { // 数据区域缩放
                    },
                    restore: { // 重置
                        title: '重置'
                    },
               },
            },
           legend:{
                data: ['语文','数学']
           },
            xAxis: {
                data: xDataArr,
                type: 'category',
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                name: '语文',
                type: 'bar',
                data: yDataArr_yuwen ,
            },
            {
                name: '数学',
                type: 'bar',
                data: yDataArr_shuxue ,
            }
        ]
        };
       

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>